<template>
	<div class="addEdit-block" style="width: 100%;">
		<el-form
			:style='{ "padding": "30px 15px", "boxShadow": "0 0px 0px #999", "borderRadius": "0px", "flexWrap": "wrap", "background": "none", "display": "flex", "justifyContent": "space-between" }'
			class="add-update-preview" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
			<template>
				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					class="input" v-if="type != 'info'" label="抽检编号" prop="bianhao">
					<el-input v-model="ruleForm.bianhao" placeholder="抽检编号" readonly></el-input>
				</el-form-item>
				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					class="input" v-else-if="ruleForm.bianhao" label="抽检编号" prop="bianhao">
					<el-input v-model="ruleForm.bianhao" placeholder="抽检编号" readonly></el-input>
				</el-form-item>
				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					class="input" v-if="type != 'info'" label="农产品名称" prop="chanpinmingcheng">
					<el-input v-model="ruleForm.chanpinmingcheng" placeholder="农产品名称" readonly ></el-input>
				</el-form-item>
				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					v-else class="input" label="农产品名称" prop="chanpinmingcheng">
					<el-input v-model="ruleForm.chanpinmingcheng" placeholder="农产品名称" readonly></el-input>
				</el-form-item>


				




				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					class="input" v-if="type != 'info'" label="抽检人姓名" prop="choujianren">
					<el-input v-model="ruleForm.choujianren" placeholder="抽检人姓名" readonly></el-input>
				</el-form-item>
				<el-form-item
					:style='{ "margin": "0 0 30px 0", "flexWrap": "wrap", "textAlign": "left", "background": "none", "display": "block", "width": "100%", "justifyContent": "flex-start" }'
					v-else class="input" label="抽检人姓名" prop="choujianren">
					<el-input v-model="ruleForm.choujianren" placeholder="抽检人姓名" readonly></el-input>
				</el-form-item>



				
				

				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' class="select" v-if="type!='info'"  label="供应商" prop="gongyingshangId">
					<el-select :disabled="ro.choujianjieguo" v-model="ruleForm.choujianjieguo" placeholder="抽检结果" >
						<el-option
							v-for="(item,index) in gongyingshangOptions"
							v-bind:key="index"
							:label="item.value"
							:value="item.label">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item :style='{"margin":"0 0 30px 0","flexWrap":"wrap","textAlign":"left","background":"none","display":"block","width":"100%","justifyContent":"flex-start"}' v-else class="input" label="供应商" prop="gongyingshangName">
					<el-input v-model="ruleForm.choujianjieguo"
						placeholder="抽检结果" readonly></el-input>
				</el-form-item>
			</template>
			

			<el-form-item :style='{ "padding": "0", "margin": "20px 0 0" }' class="btn">
				<el-button
					:style='{ "cursor": "pointer", "padding": "0 30px", "margin": "0 20px 0 0", "borderColor": "#1fbfae", "color": "#1fbfae", "outline": "none", "borderRadius": "0px", "background": "#e9faf8", "borderWidth": "4px", "width": "auto", "lineHeight": "40px", "fontSize": "14px", "borderStyle": "solid double solid double", "height": "44px" }'
					v-if="type != 'info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button
					:style='{ "cursor": "pointer", "padding": "0 24px", "margin": "0", "borderColor": "#dc333b", "color": "#dc333b", "outline": "none", "borderRadius": "0px", "background": "#fbeced", "borderWidth": "4px", "width": "auto", "lineHeight": "40px", "fontSize": "14px", "borderStyle": "solid double solid double", "height": "44px" }'
					v-if="type != 'info'" class="btn-close" @click="back()">取消</el-button>
				<el-button
					:style='{ "cursor": "pointer", "padding": "0 24px", "margin": "0", "borderColor": "#dc333b", "color": "#dc333b", "outline": "none", "borderRadius": "0px", "background": "#fbeced", "borderWidth": "4px", "width": "auto", "lineHeight": "40px", "fontSize": "14px", "borderStyle": "solid double solid double", "height": "44px" }'
					v-if="type == 'info'" class="btn-close" @click="back()">返回</el-button>
			</el-form-item>
		</el-form>


	</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard } from "@/utils/validate";
export default {
	data() {
		let self = this
		var validateIdCard = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!checkIdCard(value)) {
				callback(new Error("请输入正确的身份证号码"));
			} else {
				callback();
			}
		};
		var validateUrl = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isURL(value)) {
				callback(new Error("请输入正确的URL地址"));
			} else {
				callback();
			}
		};
		var validateMobile = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isMobile(value)) {
				callback(new Error("请输入正确的手机号码"));
			} else {
				callback();
			}
		};
		var validatePhone = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isPhone(value)) {
				callback(new Error("请输入正确的电话号码"));
			} else {
				callback();
			}
		};
		var validateEmail = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isEmail(value)) {
				callback(new Error("请输入正确的邮箱地址"));
			} else {
				callback();
			}
		};
		var validateNumber = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isNumber(value)) {
				callback(new Error("请输入数字"));
			} else {
				callback();
			}
		};
		var validateIntNumber = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isIntNumer(value)) {
				callback(new Error("请输入整数"));
			} else {
				callback();
			}
		};
		return {
			id: '',
			type: '',


			ro: {
				bianhao: false,
				chanpinmingcheng: false,
				chanpinfenlei: false,
				gongyingshangId: false,
				gongyingshangName: false,
				choujianren: false,
				tupian: false,
				choujianzhuangtai: false,
				choujianjieguo: false,
				xiangqing: false,
			},


			ruleForm: {
				bianhao: this.getUUID(),
				chanpinmingcheng: '',
				chanpinfenlei: '',
				gongyingshangId: '',
				gongyingshangName: '',
				choujianren: '',
				tupian: '',
				choujianzhuangtai: '',
				choujianjieguo: '',
				xiangqing: '',
			},

			chanpinfenleiOptions: [],

			gongyingshangOptions: [
				//有三种结果，抽检中、抽检合格、抽检不合格
				{ value: '抽检中', label: '抽检中' },
				{ value: '抽检合格', label: '抽检合格' },
				{ value: '抽检不合格', label: '抽检不合格' },
			],



			rules: {
				bianhao: [
				],
				chanpinmingcheng: [
				],
				chanpinfenlei: [
				],
				choujianren: [
				],
				tupian: [
				],
				choujianzhuangtai: [
					{ validator: validateIntNumber, trigger: 'blur' },
				],
				xiangqing: [
				],
			}
		};
	},
	props: ["parent"],
	computed: {



	},
	created() {
	},
	methods: {

		// 下载
		download(file) {
			window.open(`${file}`)
		},
		// 初始化
		init(id, type) {
			if (id) {
				this.id = id;
				this.type = type;
			}
			if (this.type == 'info' || this.type == 'else') {
				this.info(id);
			} else if (this.type == 'logistics') {
				this.logistics = false;
				this.info(id);
			} else if (this.type == 'cross') {
				var obj = this.$storage.getObj('crossObj');
				for (var o in obj) {
					if (o == 'bianhao') {
						this.ruleForm.bianhao = obj[o];
						this.ro.bianhao = true;
						continue;
					}
					if (o == 'chanpinmingcheng') {
						this.ruleForm.chanpinmingcheng = obj[o];
						this.ro.chanpinmingcheng = true;
						continue;
					}
					if (o == 'chanpinfenlei') {
						this.ruleForm.chanpinfenlei = obj[o];
						this.ro.chanpinfenlei = true;
						continue;
					}
					if (o == 'gongyingshangId') {
						this.ruleForm.gongyingshangId = obj[o];
						this.ro.gongyingshangId = true;
						continue;
					}
					if (o == 'choujianren') {
						this.ruleForm.choujianren = obj[o];
						this.ro.choujianren = true;
						continue;
					}
					if (o == 'tupian') {
						this.ruleForm.tupian = obj[o];
						this.ro.tupian = true;
						continue;
					}
					if (o == 'choujianzhuangtai') {
						this.ruleForm.choujianzhuangtai = obj[o];
						this.ro.choujianzhuangtai = true;
						continue;
					}

					if (o == 'choujienjieguo') {
						this.ruleForm.choujienjieguo = obj[o];
						this.ro.choujienjieguo = true;
						continue;
					}

					if (o == 'xiangqing') {
						this.ruleForm.xiangqing = obj[o];
						this.ro.xiangqing = true;
						continue;
					}
				}








			}


			// 获取用户信息
			this.$http({
				url: `${this.$storage.get('sessionTable')}/session`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {

					var json = data.data;
				} else {
					this.$message.error(data.msg);
				}
			});

			this.$http({
				url: `option/chanpinfenlei/chanpinfenlei`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.chanpinfenleiOptions = data.data;
				} else {
					this.$message.error(data.msg);
				}
			});

		
		},
		// 多级联动参数

		info(id) {
			this.$http({
				url: `chanpinchoujian/info/${id}`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.ruleForm = data.data;
					//解决前台上传图片后台不显示的问题
					let reg = new RegExp('../../../upload', 'g')//g代表全部
					this.ruleForm.xiangqing = this.ruleForm.xiangqing.replace(reg, '../../../traceability/upload');
				} else {
					this.$message.error(data.msg);
				}
			});
		},


		// 提交
		onSubmit() {










			if (this.ruleForm.tupian != null) {
				this.ruleForm.tupian = this.ruleForm.tupian.replace(new RegExp(this.$base.url, "g"), "");
			}





			var objcross = this.$storage.getObj('crossObj');

			//更新跨表属性
			var crossuserid;
			var crossrefid;
			var crossoptnum;
			if (this.type == 'cross') {
				var statusColumnName = this.$storage.get('statusColumnName');
				var statusColumnValue = this.$storage.get('statusColumnValue');
				if (statusColumnName != '') {
					var obj = this.$storage.getObj('crossObj');
					if (statusColumnName && !statusColumnName.startsWith("[")) {
						for (var o in obj) {
							if (o == statusColumnName) {
								obj[o] = statusColumnValue;
							}
						}
						var table = this.$storage.get('crossTable');
						this.$http({
							url: `${table}/update`,
							method: "post",
							data: obj
						}).then(({ data }) => { });
					} else {
						crossuserid = this.$storage.get('userid');
						crossrefid = obj['id'];
						crossoptnum = this.$storage.get('statusColumnName');
						crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
					}
				}
			}
			this.$refs["ruleForm"].validate(valid => {
				if (valid) {
					if (crossrefid && crossuserid) {
						this.ruleForm.crossuserid = crossuserid;
						this.ruleForm.crossrefid = crossrefid;
						let params = {
							page: 1,
							limit: 10,
							crossuserid: this.ruleForm.crossuserid,
							crossrefid: this.ruleForm.crossrefid,
						}
						this.$http({
							url: "chanpinchoujian/page",
							method: "get",
							params: params
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								if (data.data.total >= crossoptnum) {
									this.$message.error(this.$storage.get('tips'));
									return false;
								} else {
									this.$http({
										url: `chanpinchoujian/${!this.ruleForm.id ? "save" : "update"}`,
										method: "post",
										data: this.ruleForm
									}).then(({ data }) => {
										if (data && data.code === 0) {
											this.$message({
												message: "操作成功",
												type: "success",
												duration: 1500,
												onClose: () => {
													this.parent.showFlag = true;
													this.parent.addOrUpdateFlag = false;
													this.parent.chanpinxinxiCrossAddOrUpdateFlag = false;
													this.parent.search();
													this.parent.contentStyleChange();
												}
											});
										} else {
											this.$message.error(data.msg);
										}
									});

								}
							} else {
							}
						});
					} else {
						this.$http({
							url: `chanpinchoujian/${!this.ruleForm.id ? "save" : "update"}`,
							method: "post",
							data: this.ruleForm
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: "操作成功",
									type: "success",
									duration: 1500,
									onClose: () => {
										this.parent.showFlag = true;
										this.parent.addOrUpdateFlag = false;
										this.parent.chanpinxinxiCrossAddOrUpdateFlag = false;
										this.parent.search();
										this.parent.contentStyleChange();
									}
								});
							} else {
								this.$message.error(data.msg);
							}
						});
					}
				}
			});
		},
		// 获取uuid
		getUUID() {
			return new Date().getTime();
		},
		// 返回
		back() {
			this.parent.showFlag = true;
			this.parent.addOrUpdateFlag = false;
			this.parent.chanpinxinxiCrossAddOrUpdateFlag = false;
			this.parent.contentStyleChange();
		},
		tupianUploadChange(fileUrls) {
			this.ruleForm.tupian = fileUrls;
		},
	}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
	width: 100%;
	height: 500px;
}

.search-box {
	position: absolute;
}

.el-date-editor.el-input {
	width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	text-shadow: 0 1px 10px #fff;
	color: #666;
	background: none;
	font-weight: 500;
	display: block;
	width: 120px;
	font-size: 14px;
	line-height: 40px;
	text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
	margin-left: 120px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 12px;
	box-shadow: 0 0 0px #4b681d;
	outline: none;
	color: #666;
	background: #fff;
	width: 400px;
	font-size: 14px;
	border-color: #2adbcb;
	border-width: 4px;
	border-style: solid double solid double;
	height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 10px;
	box-shadow: 0 0 0px #4b681d;
	outline: none;
	color: #666;
	width: 400px;
	font-size: 14px;
	border-color: #2adbcb;
	border-width: 4px;
	border-style: solid double solid double;
	height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
	border: 0px solid #333;
	border-radius: 0px;
	padding: 0 10px 0 30px;
	box-shadow: 0 0 0px #4b681d;
	outline: none;
	color: #666;
	width: 400px;
	font-size: 14px;
	border-color: #2adbcb;
	border-width: 4px;
	border-style: solid double solid double;
	height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	line-height: initial;
	vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
	border: 2px solid #ddd;
	cursor: pointer;
	border-radius: 0px;
	color: #2adbcb;
	width: 200px;
	font-size: 32px;
	border-color: #2adbcb;
	border-width: 4px;
	line-height: 90px;
	border-style: solid double solid double;
	text-align: center;
	height: 100px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	border: 2px solid #ddd;
	cursor: pointer;
	border-radius: 0px;
	color: #2adbcb;
	width: 200px;
	font-size: 32px;
	border-color: #2adbcb;
	border-width: 4px;
	line-height: 90px;
	border-style: solid double solid double;
	text-align: center;
	height: 100px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
	border: 2px solid #ddd;
	cursor: pointer;
	border-radius: 0px;
	color: #2adbcb;
	width: 200px;
	font-size: 32px;
	border-color: #2adbcb;
	border-width: 4px;
	line-height: 90px;
	border-style: solid double solid double;
	text-align: center;
	height: 100px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	border-radius: 0px;
	padding: 12px;
	box-shadow: 0 0 0px #4b681d;
	outline: none;
	color: #666;
	width: 500px;
	font-size: 14px;
	min-height: 120px;
	border-color: #2adbcb;
	border-width: 4px;
	border-style: solid double solid double;
	height: auto;
}</style>
